<template>
  <div class="course-content" :style="{ height: `${viewheight.GetViewHeight(105)}px` }">
    <CourseCardComponent :loading="loading" :coursepage="coursepage" :totalcourse="totalcourse" :disabled="disabled"
      @load-data="loadData">
      <template #dropslot="slotProp">
        <el-dropdown-menu>
          <el-dropdown-item :icon="Star" @click="like(slotProp.itemValue)">收藏</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </CourseCardComponent>
  </div>
</template>

<script setup lang="ts">
import { useViewHeightStore } from "@/store/viewheight";
import CourseCardComponent from "@components/CourseCardComponent/CourseCardComponent.vue";
import { Star } from "@icon-park/vue-next";
import { Tcourse } from "@/models/course";
import { course_collect } from "@api/courseapi";
import { course_page } from "@/api/courseapi";
import { ref, watch } from "vue";
import { RandomPicture } from "@/utils/randompic";

const viewheight = useViewHeightStore();

const like = async (item: Tcourse) => {
  const res = await course_collect({ id: item.id });
  if (res.code === 200) {
    ElMessage.success(res.msg);
    return;
  }
  ElMessage.warning(res.msg);
}

const loading = ref<boolean>(false)
const coursepage = ref<Array<Tcourse>>([])
const totalcourse = ref<number>(0);
const disabled = ref<boolean>(false);

const loadData = async (current: number) => {
  loading.value = true;
  const res = await course_page({ current: current, size: 12 });
  if (res.code === 200) {
    res.data.records.forEach((item) => {
      item.pic = RandomPicture();
    })
    coursepage.value = coursepage.value.concat(res.data.records);
    totalcourse.value = res.data.total;
    loading.value = false;
  }
}

watch(() => coursepage.value, () => {
  if (coursepage.value.length === totalcourse.value) {
    disabled.value = true;
  }
})

</script>

<style scoped lang="less">
.course-content {
  width: 84%;
}
</style>
